<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <!--冒泡事件-->
    <div id="app" @click="click2()">
        <input type="button" value="click" @click="click(event,12)" />
        <!--使用stop阻止冒泡-->
        <input type="button" value="stop" @click.stop="click3(event,12)" />
    </div>

    <script>
        new Vue({
            el: "#app",
            methods: {
                click: function (para1,para2) {
                    //阻止冒泡，使用原生JS
                    para1.cancelBubble=true;
                    alert(para1.clientX);
                    alert(para2);
                },
                click2:function(){
                    alert("事件冒泡！")
                },
                click3:function(){
                    alert("stop 停止冒泡");
                },
            }
        });
    </script>
</body>

</html>